<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css"/>
    <style>

        body {
            font-family: Helvetica Neue, Arial, sans-serif;
        }


        text {
            font-family: Helvetica Neue, Arial, sans-serif;
            font-size: 10px;
            fill: #666;
        }
        .el-Ui-Body {
            background-color: rgb(234, 241, 246);
            background-image: none;
            background-repeat: repeat;
            background-attachment: fixed;
        }
        .el-form-item {
            margin-bottom: 5px;
        }

        .el-fieldset {
            border-style: solid;
            border-width: 2px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            line-height: 30px;
            list-style: none;
            padding: 5px 10px;
            margin-bottom: 2px;
            color:#302A2A;
            font: bold 14px/2 Verdana, Geneva, sans-serif;
            font-weight: bold;
            text-align: left;
            height:700px;
        }
    </style>
</head>
<body>

<div id="app">
    <el-row style="margin-bottom: 2px;">
        <el-col :span="24">
            <div style="background:#50bfff; height:50px;">
                <span style="font-size: 2em;">物料清单拆分维护</span>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="11">
            <fieldset class="el-fieldset">
                <legend>原始BOM</legend>
                <el-form :model="sForm" label-width="80px">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="BOM">
                                <el-input v-model="sForm.bom" icon="search" :on-icon-click="itemBomSearch">
                                </el-input>
                                <input type="hidden" id="bomIdHidden" value=""/>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="版本 :">
                                <el-input v-model="sForm.version" placeholder="版本"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <el-form-item label="描述">
                                <el-input v-model="sForm.description" placeholder="描述" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin:5px 10px 5px 10px;">
                        <el-col>
                            <el-button type="primary" @click="query">检索</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <template>
                            <el-table
                                    ref="multipleTable"
                                    :data="itemData"
                                    height="530"
                                    tooltip-effect="dark"
                                    @selection-change="selectBomDetailChange"
                                    style="width: 100%">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        label="顺序"
                                        prop="sequence"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="assyItem"
                                        label="组件/版本"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="assyQty"
                                        label="装配数量">
                                </el-table-column>
                                <el-table-column
                                        prop="measure"
                                        label="单位">
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-row>
                </el-form>
            </fieldset>
        </el-col>
        <el-col :span="1">
            <div style="margin-top:300px;">
                <el-button type="primary" style="margin:5px 0px 5px 0px;" class="el-icon-d-arrow-right" @click="removeToComponent"></el-button>
                <el-button type="primary" style="margin:5px 0px 5px 0px;" class="el-icon-d-arrow-left"></el-button>
            </div>
        </el-col>
        <el-col :span="12">
            <fieldset class="el-fieldset">
                <legend>拆分BOM</legend>
                <el-form  :model="tForm"  label-width="80px">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="BOM">
                                <el-input v-model="tForm.bom"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="版本">
                                <el-input v-model="tForm.version" placeholder="版本"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="描述">
                                <el-input v-model="tForm.description" placeholder="描述"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin:5px 10px 5px 10px;">
                        <el-col>
                            <el-button type="primary" @click="saveBomData">保存</el-button>
                            <el-button type="primary" @click="bomComponentDialog=true">创建物料</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                            <el-tree
                                height="530"
                                ref="splitBomTree"
                                check-strictly
                                :data="splitBomData"
                                show-checkbox
                                node-key="id"
                                default-expand-all
                                @check-change="choseDestBom"
                                :expand-on-click-node=false
                                style="width: 100%">
                            </el-tree>
                    </el-row>
                </el-form>
            </fieldset>
        </el-col>
    </el-row>
    <!-- 创建物料弹出框 -->
    <el-dialog title="创建新物料" :visible.sync="bomComponentDialog">
        <el-form :model="newItemForm">
            <el-row :gutter="3" >
                <el-col :span="8"><div>
                    <el-form-item label="物料:">
                        <el-input placeholder="" v-model="newItemForm.item">
                        </el-input>
                    </el-form-item>
                </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-form-item label="版本:">
                            <el-input v-model="newItemForm.version" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="3">
                <el-col :span="16">
                    <el-form-item label="描述:">
                        <el-input v-model="newItemForm.desc" auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="bomComponentDialog=false">取 消</el-button>
            <el-button type="primary" @click="createNewItem">确 定</el-button>
        </div>
    </el-dialog>

    <!-- BOM检索弹出框 -->
    <el-dialog title="物料清单" :visible.sync="itemBomSearchDialog" top="5%">
        <el-table :data="sourceBomData" @row-dblclick="selectedRowBom" border style="width: 100%" height="600">
            <el-table-column property="id" label="物料清单" width="230"></el-table-column>
            <el-table-column property="name" label="描述" width="300"></el-table-column>
            <el-table-column property="version" label="版本" width="200"></el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="index.js"></script>

<script type="text/javascript" src="mock.js"></script>
<script src="axios.js"></script>
<script type="text/javascript" src="bomSplitMain.js"></script>

</html>